<template>
    <Modal
        title="预约工单详情"
        :value="show"
        width="600"
        @on-visible-change="setVisibility">

        <Spin v-if="loading" fix></Spin>

        <kv-wrap
            label-width="120"
            align="right"
            padding="20px 20px 20px 0"
            fontSize="13px"
            v-if="ticket">

            <kv-item label="联系人">
                {{ticket.subscribe.name}}
            </kv-item>

            <kv-item label="联系人电话">
                {{ticket.subscribe.phone}}
            </kv-item>

            <kv-item label="公寓地址">
                {{concatLocation(ticket.home_info)}}
            </kv-item>
            <hr style="border:.5px solid #dddee1;margin-bottom:20px"/>
            <kv-item label="期待上门时间">
                {{ticket.subscribe.expected_time | date('YYYY-MM-DD HH:ss')}}
                ({{ticket.subscribe.expected_period | appointmentPeriod}})
            </kv-item>

            <kv-item label="预约上门时间" v-if="ticket.appointment_time">
                {{ticket.appointment_time | date('YYYY-MM-DD HH:ss')}}
                ({{ticket.appointment_period | appointmentPeriod}})
            </kv-item>
            <hr  style="border:.5px solid #dddee1;margin-bottom:20px""/>
            <kv-item label="设备类型" v-if="ticket.ticket_product_statistics && !ticket.ticket_product_statistics.length">
                {{ticket.service_target | ticketDeviceType}}
            </kv-item>

            <kv-item label="下单设备" v-if="ticket.ticket_product_statistics && ticket.ticket_product_statistics.length">
                {{ticket.ticket_product_statistics | ticketDeviceModel}}
            </kv-item>

            <kv-item label="安装设备" v-if="ticket.done_devices.length">
                {{ticket.done_devices | ticketInstalledDeviceModel}}
            </kv-item>

            <kv-item label="房间号">
                <Tag
                    v-for="(room, index) in ticket.ticket_devices"
                    :key="index"
                    @click.native="openRoom(room)">{{room.room_name}}</Tag>
            </kv-item>

            <!-- <kv-item :label="label" v-if="opened">
                <Carousel v-model="carouselIndex" loop>
                    <CarouselItem>
                        <div class="ticket-room-pic">

                        </div>
                    </CarouselItem>
                    <CarouselItem>
                        <div class="ticket-room-pic">1122</div>
                    </CarouselItem>
                    <CarouselItem>
                        <div class="ticket-room-pic">323</div>
                    </CarouselItem>
                    <CarouselItem>
                        <div class="ticket-room-pic">423</div>
                    </CarouselItem>
                </Carousel>
            </kv-item> -->

            <kv-item label="备注">
                {{ticket.subscribe.note || '无'}}
            </kv-item>

        </kv-wrap>

        <Row slot="footer">
            <Button type="primary" @click="setVisibility(false)">取消</Button>
        </Row>
    </Modal>
</template>

<script>
/**
 * 工单-预约工单详情
 */
import util from '@/libs/util'
import { http, api } from '@/libs/http'

export default {
  name: 'appointment-detail-modal',
  props: {
    show: Boolean,
    ticketId: [String, Number]
  },
  data () {
    return {
      opened: false,
      label: '',
      carouselIndex: 0,
      ticket: null,
      loading: false
    }
  },
  watch: {
    show (n) {
      if (n) {
        this.initDetail(this.ticketId)
      } else {
        this.opened = false
        setTimeout(() => {
          this.ticket = null
        }, 500)
      }
    }
  },
  methods: {
    concatLocation: util.concatLocation,
    setVisibility (val) {
      this.$emit('update:show', val)
    },
    openRoom (room) {
      this.opened = true
      this.label = room.room_name + '的照片'
    },
    async initDetail (id) {
      try {
        this.loading = true
        const detail = await http.req(api.ticket_info, [id], null)
        if (detail) this.ticket = detail
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style>
.appointment-detail {
    font-size: 14px;
    padding: 20px;
    padding-bottom: 0;
}
.appointment-detail-key {
    display: inline-block;
    width: 100px;
    margin-right: 10px;
    text-align: right;
}
.appointment-detail > p {
    margin-bottom: 20px;
}

.ticket-room-pic {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: #0c9;
}
</style>